<template>
  <div class="pb">
    <el-steps :active="isActive" simple>
      <el-step title="基本信息登记"></el-step>
      <el-step title="借阅人登记"></el-step>
      <el-step title="借阅物品登记"></el-step>
      <el-step title="资料提交"></el-step>
    </el-steps>

    <div class="pb-content">

      <basic-information v-if="isActive === 1"
                         :formObj="formObj"
                         @handleNext="handleNext($event, 2)"></basic-information>

      <borrower v-if="isActive === 2"
                :formObj="formObj"
                @handleNext="handleNext($event, 3)"></borrower>

      <borrowing-goods v-if="isActive === 3"
                       :formObj="formObj"
                       @handleNext="handleNext($event, 4)"></borrowing-goods>

      <data-submit v-if="isActive === 4"
                   :formObj="formObj"
                   :loading="loading"
                   @handleComplete="handleComplete"></data-submit>
    </div>

  </div>
</template>

<script>
import BasicInformation from './basicInformation'
import Borrower from './borrower'
import BorrowingGoods from './borrowingGoods'
import DataSubmit from './dataSubmit'

export default {
  name: 'addPBRegister',
  components: {
    DataSubmit,
    BorrowingGoods,
    Borrower,
    BasicInformation
  },
  props: {
    type: {
      type: String,
      request: true
    },
    active: {
      type: Number,
      request: true
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      setActive: 1,
      autosize: {
        minRows: 4,
        maxRows: 6
      },
      formObj: {
        pab: {}
      },
      rules: {
        name: [
          { required: true }
        ]
      }
    }
  },
  mounted () {
  },
  computed: {
    isActive () {
      return this.setActive ? this.setActive : this.active
    }
  },
  methods: {
    handleNext (val, active) {
      this.setActive = active
      console.log(this.formObj)
    },
    handleComplete () {
      // 完成，关闭弹窗
      this.$emit('handleComplete', this.formObj)
    },
    handleEmpty () {
      this.setActive = 1
      this.formObj = {}
    }
  }
}
</script>

<style lang="scss" scoped>
  .pb {
    background: #e9e9e9;
    height: 100%;

    .el-steps {
      ::v-deep .el-step__icon {
        display: none;
      }
    }

    .pb-content {
      height: calc(100vh - 125px);
      padding: 0 20px 10px;
      overflow-y: auto;
      background: #F5F7FA;
    }
  }
</style>
